<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>分类推送</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.category-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.category-nav {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 25px;
			padding: 20px;
		}
		.category-tabs {
			display: flex;
			gap: 15px;
			flex-wrap: wrap;
			justify-content: center;
		}
		.category-tab {
			padding: 12px 24px;
			border: 2px solid #e9ecef;
			border-radius: 25px;
			cursor: pointer;
			transition: all 0.3s;
			display: flex;
			align-items: center;
			gap: 8px;
			font-weight: 500;
		}
		.category-tab.active {
			background: #409eff;
			color: white;
			border-color: #409eff;
		}
		.category-tab:hover:not(.active) {
			border-color: #409eff;
			color: #409eff;
		}
		.category-content {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 25px;
		}
		.content-header {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 20px;
			border-radius: 8px 8px 0 0;
		}
		.category-stats {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 20px;
			margin-top: 15px;
		}
		.stat-card {
			text-align: center;
			background: rgba(255, 255, 255, 0.1);
			padding: 15px;
			border-radius: 8px;
		}
		.stat-number {
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 5px;
		}
		.products-section {
			padding: 25px;
		}
		.section-title {
			font-size: 18px;
			font-weight: 600;
			color: #333;
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.product-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
			gap: 20px;
		}
		.product-card {
			border: 1px solid #e9ecef;
			border-radius: 8px;
			overflow: hidden;
			transition: transform 0.2s, box-shadow 0.2s;
			cursor: pointer;
		}
		.product-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
		}
		.product-image {
			width: 100%;
			height: 180px;
			object-fit: cover;
			position: relative;
		}
		.product-badge {
			position: absolute;
			top: 10px;
			left: 10px;
			background: #e74c3c;
			color: white;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: bold;
		}
		.product-info {
			padding: 15px;
		}
		.product-name {
			font-size: 16px;
			font-weight: 500;
			color: #333;
			margin-bottom: 8px;
		}
		.product-features {
			display: flex;
			gap: 6px;
			margin-bottom: 10px;
			flex-wrap: wrap;
		}
		.feature-tag {
			background: #f8f9fa;
			color: #6c757d;
			padding: 2px 6px;
			border-radius: 3px;
			font-size: 11px;
		}
		.product-price {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.price {
			color: #e74c3c;
			font-size: 18px;
			font-weight: bold;
		}
		.original-price {
			color: #999;
			text-decoration: line-through;
			font-size: 14px;
		}
		.filters {
			display: flex;
			gap: 15px;
			margin-bottom: 20px;
			flex-wrap: wrap;
			align-items: center;
		}
		.filter-label {
			font-weight: 500;
			color: #333;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="category-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>分类推送</h2>
				<p>按商品品类为您精准推送，满足不同需求</p>
			</div>

			<!-- 分类导航 -->
			<div class="category-nav">
				<div class="category-tabs">
					<div 
						v-for="category in categories" 
						:key="category.id" 
						:class="['category-tab', {active: activeCategory === category.id}]"
						@click="switchCategory(category.id)">
						<i :class="category.icon"></i>
						{{category.name}}
					</div>
				</div>
			</div>

			<!-- 分类内容 -->
			<div class="category-content" v-if="currentCategoryData">
				<div class="content-header">
					<h3>{{currentCategoryData.name}} - {{currentCategoryData.description}}</h3>
					<div class="category-stats">
						<div class="stat-card">
							<div class="stat-number">{{currentCategoryData.stats.totalProducts}}</div>
							<div>商品总数</div>
						</div>
						<div class="stat-card">
							<div class="stat-number">{{currentCategoryData.stats.newToday}}</div>
							<div>今日新品</div>
						</div>
						<div class="stat-card">
							<div class="stat-number">{{currentCategoryData.stats.onSale}}</div>
							<div>促销商品</div>
						</div>
						<div class="stat-card">
							<div class="stat-number">{{currentCategoryData.stats.avgDelivery}}</div>
							<div>平均配送时间</div>
						</div>
					</div>
				</div>

				<div class="products-section">
					<!-- 筛选器 -->
					<div class="filters">
						<span class="filter-label">筛选：</span>
						<el-select v-model="selectedPrice" placeholder="价格区间" size="small" style="width: 120px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="0-50元" value="0-50"></el-option>
							<el-option label="50-100元" value="50-100"></el-option>
							<el-option label="100元以上" value="100+"></el-option>
						</el-select>
						<el-select v-model="selectedOrigin" placeholder="产地" size="small" style="width: 120px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="国产" value="domestic"></el-option>
							<el-option label="进口" value="imported"></el-option>
						</el-select>
						<el-select v-model="selectedSort" placeholder="排序" size="small" style="width: 120px;">
							<el-option label="综合推荐" value="recommend"></el-option>
							<el-option label="价格升序" value="price_asc"></el-option>
							<el-option label="价格降序" value="price_desc"></el-option>
							<el-option label="销量优先" value="sales"></el-option>
						</el-select>
						<el-button size="small" @click="resetFilters">重置</el-button>
					</div>

					<!-- 热门推荐 -->
					<div v-if="filteredProducts.hot.length > 0">
						<div class="section-title">
							<i class="el-icon-hot-water" style="color: #e74c3c;"></i>
							热门推荐
						</div>
						<div class="product-grid">
							<div v-for="product in filteredProducts.hot" :key="product.id" class="product-card" @click="viewProduct(product)">
								<div style="position: relative;">
									<img :src="product.image" :alt="product.name" class="product-image">
									<span v-if="product.badge" class="product-badge">{{product.badge}}</span>
								</div>
								<div class="product-info">
									<div class="product-name">{{product.name}}</div>
									<div class="product-features">
										<span v-for="feature in product.features" :key="feature" class="feature-tag">{{feature}}</span>
									</div>
									<div class="product-price">
										<span class="price">¥{{product.price}}</span>
										<span v-if="product.originalPrice" class="original-price">¥{{product.originalPrice}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 新品上架 -->
					<div v-if="filteredProducts.new.length > 0" style="margin-top: 30px;">
						<div class="section-title">
							<i class="el-icon-star-on" style="color: #f39c12;"></i>
							新品上架
						</div>
						<div class="product-grid">
							<div v-for="product in filteredProducts.new" :key="product.id" class="product-card" @click="viewProduct(product)">
								<div style="position: relative;">
									<img :src="product.image" :alt="product.name" class="product-image">
									<span v-if="product.badge" class="product-badge">{{product.badge}}</span>
								</div>
								<div class="product-info">
									<div class="product-name">{{product.name}}</div>
									<div class="product-features">
										<span v-for="feature in product.features" :key="feature" class="feature-tag">{{feature}}</span>
									</div>
									<div class="product-price">
										<span class="price">¥{{product.price}}</span>
										<span v-if="product.originalPrice" class="original-price">¥{{product.originalPrice}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					activeCategory: 'fresh',
					selectedPrice: '',
					selectedOrigin: '',
					selectedSort: 'recommend',
					categories: [
						{id: 'fresh', name: '生鲜蔬菜', icon: 'el-icon-grape'},
						{id: 'meat', name: '精品肉类', icon: 'el-icon-food'},
						{id: 'seafood', name: '海鲜水产', icon: 'el-icon-fish'},
						{id: 'frozen', name: '冷冻食品', icon: 'el-icon-ice-cream'},
						{id: 'dairy', name: '乳制品', icon: 'el-icon-milk-tea'},
						{id: 'fruit', name: '新鲜水果', icon: 'el-icon-orange'}
					],
					categoryData: {
						fresh: {
							name: '生鲜蔬菜',
							description: '新鲜有机，绿色健康',
							stats: {
								totalProducts: 156,
								newToday: 8,
								onSale: 23,
								avgDelivery: '2小时'
							},
							products: {
								hot: [
									{
										id: 1,
										name: '有机小白菜',
										price: 12.8,
										originalPrice: 15.8,
										image: 'https://p2.ssl.qhimgs1.com/sdr/400__/t0167b6ce7246d1876c.jpg',
										features: ['有机认证', '当日采摘', '低温保鲜'],
										badge: '热销',
										origin: 'domestic',
										priceRange: '0-50'
									},
									{
										id: 2,
										name: '荷兰进口西红柿',
										price: 28.8,
										image: 'https://p2.ssl.qhimgs1.com/sdr/400__/t04fcd7a71ef43d6418.jpg',
										features: ['进口品质', '温室种植', '口感佳'],
										badge: '进口',
										origin: 'imported',
										priceRange: '0-50'
									}
								],
								new: [
									{
										id: 3,
										name: '紫甘蓝',
										price: 18.8,
										image: 'https://p2.ssl.qhimgs1.com/sdr/400__/t043cfac881a49669cc.jpg',
										features: ['富含花青素', '营养丰富', '新鲜配送'],
										badge: '新品',
										origin: 'domestic',
										priceRange: '0-50'
									}
								]
							}
						},
						meat: {
							name: '精品肉类',
							description: '优质肉源，冷链保鲜',
							stats: {
								totalProducts: 89,
								newToday: 3,
								onSale: 12,
								avgDelivery: '3小时'
							},
							products: {
								hot: [
									{
										id: 4,
										name: '澳洲和牛',
										price: 188.0,
										originalPrice: 228.0,
										image: 'https://via.placeholder.com/280x180/8BC34A/FFFFFF?text=澳洲和牛',
										features: ['顶级和牛', '雪花纹理', '嫩滑多汁'],
										badge: '限时特价',
										origin: 'imported',
										priceRange: '100+'
									}
								],
								new: [
									{
										id: 5,
										name: '黑猪肉',
										price: 45.8,
										image: 'https://via.placeholder.com/280x180/795548/FFFFFF?text=黑猪肉',
										features: ['土猪肉', '自然放养', '肉质鲜美'],
										badge: '农家直供',
										origin: 'domestic',
										priceRange: '0-50'
									}
								]
							}
						},
						seafood: {
							name: '海鲜水产',
							description: '深海捕捞，急冻保鲜',
							stats: {
								totalProducts: 124,
								newToday: 6,
								onSale: 18,
								avgDelivery: '4小时'
							},
							products: {
								hot: [
									{
										id: 6,
										name: '阿拉斯加帝王蟹',
										price: 298.0,
										image: 'https://via.placeholder.com/280x180/FF9800/FFFFFF?text=帝王蟹',
										features: ['野生捕捞', '肉质饱满', '急冻锁鲜'],
										badge: '野生',
										origin: 'imported',
										priceRange: '100+'
									}
								],
								new: [
									{
										id: 7,
										name: '冰岛三文鱼',
										price: 88.0,
										image: 'https://via.placeholder.com/280x180/E91E63/FFFFFF?text=冰岛三文鱼',
										features: ['深海野生', 'Omega-3丰富', '刺身级'],
										badge: '刺身级',
										origin: 'imported',
										priceRange: '50-100'
									}
								]
							}
						}
					}
				}
			},
			computed: {
				currentCategoryData() {
					return this.categoryData[this.activeCategory];
				},
				filteredProducts() {
					if (!this.currentCategoryData) return {hot: [], new: []};
					
					const filterProduct = (product) => {
						// 价格筛选
						if (this.selectedPrice) {
							if (this.selectedPrice === '0-50' && product.price > 50) return false;
							if (this.selectedPrice === '50-100' && (product.price <= 50 || product.price > 100)) return false;
							if (this.selectedPrice === '100+' && product.price <= 100) return false;
						}
						
						// 产地筛选
						if (this.selectedOrigin && product.origin !== this.selectedOrigin) return false;
						
						return true;
					};
					
					return {
						hot: this.currentCategoryData.products.hot.filter(filterProduct),
						new: this.currentCategoryData.products.new.filter(filterProduct)
					};
				}
			},
			methods: {
				switchCategory(categoryId) {
					this.activeCategory = categoryId;
					this.resetFilters();
				},
				resetFilters() {
					this.selectedPrice = '';
					this.selectedOrigin = '';
					this.selectedSort = 'recommend';
				},
				viewProduct(product) {
					this.$message.info(`查看商品: ${product.name}`);
				}
			},
			mounted() {
				// 默认显示生鲜蔬菜
				this.activeCategory = 'fresh';
			}
		});
	</script>
</body>
</html>